<template>
	<view class="order">
		<view class="item">
			<view class="name">
				<view class="logo"  v-if="type == 1">
					<view class="inner-img" style="background-color: #CCE7E4;">
						<image src="../../static/index/anmo-icon.png"></image>
					</view>
					<text>{{orderInfo.service && orderInfo.service.title}}</text>
				</view>
				<view class="logo" v-if="type == 2">
					<view class="inner-img"  style="background-color: #EDE1F7;">
						<image src="../../static/index/jiudian-icon.png"></image>
					</view>
					<text>{{orderInfo.hotelName}}</text>
				</view>
				<view class="logo" v-if="type == 3">
					<view class="inner-img" style="background-color: #CEDAF5;">
						<image src="../../static/index/lvyou-icon.png"></image>
					</view>
					<text>{{orderInfo.scenicName}}</text>
				</view>
				<view class="logo" v-if="type == 4">
					<view class="inner-img" style="background-color: #FDD5E1;">
						<image src="https://qiniu-cdn.maeiyun.com/imgs/move.png"></image>
					</view>
					<text>{{orderInfo.cinemaName}}</text>
				</view>
				<view class="status">
					<text></text>
				</view>
			</view>
			<view class="product" v-if="type ==1">
				<image :src="orderInfo.service && orderInfo.service.image" mode="aspectFill"></image>
				<view class="detail">
					<view class="title">{{orderInfo.service && orderInfo.service.category_name}}</view>
					<view class="text">{{orderInfo.service&& orderInfo.subscribe_time}}</view>
					<view class="text">总价:￥{{orderInfo.price}}</view>
				</view>
			</view>
			<view class="product" v-if="type ==2">
				<image :src="orderInfo.hotel_image" mode="aspectFill"></image>
				<view class="detail">
					<view class="title">{{orderInfo.bedTypeName}}</view>
					<view class="text">{{orderInfo.checkInDate}}-{{orderInfo.checkOutDate}}</view>
					<view class="text">总价:￥{{orderInfo.price}}</view>
				</view>
			</view>
			<view class="product" v-if="type ==3">
				<image :src="orderInfo&&orderInfo.images&&orderInfo.images" mode="aspectFill"></image>
				<view class="detail">
					<view class="title">{{orderInfo.productName}}</view>
					<view class="text">{{orderInfo.travelDate}}</view>
					<view class="text">总价:￥{{orderInfo.orderAmount}}</view>
				</view>
			</view>
			<view class="product" v-if="type == 4">
				<image :src="orderInfo.filmImg" mode="aspectFill"></image>
				<view class="detail">
					<view class="title">{{orderInfo.filmName}}</view>
					<view class="text">{{orderInfo.showTimes && orderInfo.showTimes.day}}<text>{{orderInfo.hallName}}</text></view>
					<view class="text">总价:￥{{orderInfo.price}}</view>
				</view>
			</view>
			<view class="star" v-if="status == 4 || status == 5">
				<text>评价：</text>
				<view class="rate">
					<uni-rate :touchable="false" v-model="rate" />
				</view>
			</view>
		</view>
		<view class="btn" v-if="status == 5 || status == 4" @click="commit">
			<view>提交</view>
		</view>
		<view class="refund" v-else>
			<view class="list" v-if="classify<0 && orderInfo.status == 2 " @click="classify = 1" >
				<view>
					<image style="width: 45rpx;height: 44rpx;" src="/static/order/refund_icon.png"></image>
					<text style="margin-left: 20rpx;">退款</text>
				</view>
				<uni-icons type="forward" size="22" color="#444444"></uni-icons>
			</view>
			<view class="list"  v-if="classify<0 && orderInfo.status != 2"  @click="classify = 0">
				<view>
					<image style="width: 39rpx;height: 44rpx;" src="/static/order/complaint_icon.png"></image>
					<text style="margin-left: 26rpx;">投诉</text>
				</view>
				<uni-icons type="forward" size="22" color="#444444"></uni-icons>
			</view>
			<view class="inner-after-sale" v-if="classify ==0 || classify == 1">
				<view class="after-sale-title">
					{{classify == 0?'投诉':'退款'}}原因<text>*</text>
				</view>
				<view class="text-content">
					<textarea class="inner-text-content" name="" v-model="content" id="" cols="30" rows="10" placeholder="请输入原因"></textarea>
				</view>
			</view>
		</view>
		<view class="" v-if="status == 6">
			<view class="btn" v-if="classify ==0 || classify == 1" style="margin-top: 30rpx;" @click="classify == 0?complaint():returnMoney()">
				<view>提交</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: '',
				order_id:"",
				rate:0,
				questUrl:"",
				type:0,
				orderInfo:{},
				content:"",
				classify:-1,//投诉 0 退款 1
				// assessCategory:{},//分类
			}
		},
		onLoad(option) {
			this.status = option.status
			this.order_id = option.order_id
			this.type = option.type
			uni.setNavigationBarTitle({
				title: this.status == 5 ? '订单评价' : '退款/售后'
			})
			// 类型:1=上门服务,2=酒店,3=门票,4=电影票,5=开通会员
			if(this.type == 1){
				this.questUrl = "order/getOrderInfo"
			}else if(this.type == 2){
				this.questUrl = "order/getHotelOrderInfo"
			}else if(this.type == 3){
				this.questUrl = "order/getTicketOrderInfo"
			}else if(this.type == 4){
				this.questUrl = "order/getMovieOrderInfo"
			}
			this.getOrderDetail()
		},
		methods:{
			getOrderDetail() {
				var that = this
				this.request.httpTokenRequest({
					url: this.questUrl,
					method: "get"
				}, {
					order_id: this.order_id
				}).then(function(data) {
					if (data.code == 0) {
						that.orderInfo = data.data
						
					} else {}
				})
			},
			commit() {
				var that = this
				this.request.httpTokenRequest({
					url: 'order/assess',
					method: "post"
				}, {
					star: this.rate,
					order_id: this.order_id,
					is_service: this.type == 1?1:0
				}).then(function(data) {
					if (data.code == 0) {
						that.$util.msg('操作成功')
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
					} else {
						that.$util.msg(data.msg)
					}
				})
			},
			complaint() {
				var that = this
				this.request.httpTokenRequest({
					url: 'order/sfterSales',
					method: "post"
				}, {
					order_id: this.order_id,
					content:this.content
				}).then(function(data) {
					if (data.code == 0) {
						that.$util.msg('操作成功')
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
					} else {
						that.$util.msg(data.msg)
					}
				})
			},
			returnMoney(){
				var that = this
				this.request.httpTokenRequest({
					url: 'order/refund',
					method: "GET"
				}, {
					order_id: this.order_id,
					content:this.content
				}).then(function(data) {
					if (data.code == 0) {
						that.$util.msg('操作成功')
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
					} else {
						that.$util.msg(data.msg)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.order {
		min-height: 100vh;
		background: #F5F7F8;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.item {
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;

		.name {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.logo {
				display: flex;
				align-items: center;
				.inner-img{
					background-color: #028777;
					border-radius: 50%;
					margin-right: 10rpx;
					width: 40rpx;
					height: 40rpx;
					text-align: center;
					padding-top: 9rpx;
				}
				image {
					width: 26rpx;
					height: 22rpx;
				}

				text {
					font-size: 30rpx;
					color: #08090A;
					line-height: 42rpx;
				}
			}

			.status {
				font-size: 26rpx;
				line-height: 37rpx;
			}
		}

		.product {
			display: flex;
			margin: 30rpx 0 30rpx;

			image {
				width: 142rpx;
				height: 190rpx;
				margin-right: 23rpx;
			}

			.detail {
				flex: 1;

				.title {
					font-size: 28rpx;
					color: #656667;
					line-height: 40rpx;
				}

				.text {
					font-size: 24rpx;
					color: #656667;
					line-height: 33rpx;
					margin-top: 10rpx;
				}
			}
		}
	
		.star {
			display: flex;
			align-items: center;
			height: 105rpx;
			background: #F7F7F7;
			border-radius: 10rpx;
			padding: 0 30rpx;
			text {
				font-size: 26rpx;
				color: #08090A;
				line-height: 37rpx;
			}
		}
	
	}

	.btn {
		display: flex;
		flex-direction: row-reverse;
		view {
			width: 100%;
			height: 80rpx;
			background: #EF5233;
			border-radius: 290rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
		}
	}

	.refund {
		padding: 0 30rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		.list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #E9E9E9;
			view {
				display: flex;
				align-items: center;
				text {
					font-size: 30rpx;
					font-weight: 600;
					color: #08090A;
					line-height: 42rpx;
				}
			}
		}
	}
	.refund .list:last-child{
		border: 0;
	}
	
	.inner-after-sale{
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 30rpx 0;
		.after-sale-title{
			display: flex;
			align-items: flex-start;
			font-size: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #08090A;
			margin-bottom: 37rpx;
			text{
				color: #FF0000;
			}
		}
		.text-content{
			height: 243rpx;
			background: #F7F7F7;
			border-radius: 10rpx;
			padding: 28rpx;
			.inner-text-content{
				width: 100%;
				height: 100%;
				font-size: 24rpx;
			}
		}
	}

</style>